<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" id="vp" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<title>考勤</title>
		<link rel="stylesheet" type="text/css" href="../../../css/style.css">
		<link rel="stylesheet" type="text/css" href="../../../css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="../../../src/style.css">
		<style>
			#register .registerHeader{
				background: #ffde00;
				text-align: center;
				position: relative;
				font-size: 14px;
				color: #333;
				padding-bottom: 20px;
				padding-top:10px;
			}
			#register .registerHeader .userName{
				font-weight: bold;
				margin-top: 5px;
				display: inline-block;
			}
			.opacityBox{
				width: 80px;
				height: 80px;
		        margin-left: auto;
		        margin-right: auto;
		        background: url(../../../images/txbj.png) no-repeat;
		        background-size: 100%; 
			}
			#register .userImg {
		        display: inline-block;
		        width: 60px;
		        height: 60px;
		        margin-left: auto;
		        margin-right: auto;
		        border-radius: 100px;
		        margin-top: 5px;
		        
		    }
		    #register .rulesign{
		    	width: 20%; 
		    	position: absolute;
		    	right: 0;
		    	top: 18%;
		    	
		    }
		    #register .registerHeader ul{
		    	margin-top: 20px;
		    }
		    #register .registerHeader ul li p{
		    	color: #333;
		    }
		    #register .registerHeader ul li{
		    	float: left;
		    	width: 33.3%;
		    	text-align: center;
		    	height: 60px;
		    	line-height: 30px;
		    	font-weight: bold;
		    
		    }
		    #register .registerHeader ul li:nth-child(2){
		    	border-left: solid 1px #c1aa0f;
		    	border-right: solid 1px #c1aa0f;
		    }
		    #register .line{
		    	background: #fafafa;
		    	height: 5px;
		    }
		    .registerList ul{
		    	width: 80%;
		    	margin: 0 auto;
		    	padding-left: 15px;
		    	margin-top: 20px;
		    	overflow: hidden;
		    	
		    }
		    .registerList ul li{
		    	background: url(../../../images/regsiterbg.png) no-repeat 12px 0;
		    	width: 250px;
		    	background-size:28%;
		    	height:115px;
		    	position: relative;
		    }
		    .registerList ul li .time{
		    	font-weight: bold;
		    }
		    .registerList ul li .week{
		    	font-size: 12px;
		    	color: #999;
		    	padding-left: 50px;
		    }
		    .registerinfo{
		    	position: relative;
		    	left: 69px;
		    	top: 14px;
		    	margin-bottom: 10px;
		    }
		    .registerinfo div{
		    	display: inline-block;
		    }
		    .colorstatus{
		    	width: 8px;
		    	height:8px;
		    	border-radius: 100px;
		    }
		    .red{
		    	background: #ff3000;
		    }
		    .green{
		    	background: #10c157;
		    }
		    .concretetime{
		    	color: #666;
		    	font-size: 12px;
		    	
		    }
		    .textstatus{
		    	width:35px;
		    	height:20px;
		    	line-height: 20px; 
		    	border-radius: 10px;
		    	margin-top: 15px;
		    	margin-left: 20px;
		    	margin-right: 15px;
		    	margin-top: 2px;
		    	font-size: 12px;
		    	color: #fff;
		    	text-align: center;
		    }
		</style>
		<script>
			
		</script>
	</head>
	<body> 
	<div id="register">
		<div id="pullrefresh" class="mui-content mui-scroll-wrapper list-frame" style="background: #fff;">
				<div class="mui-scroll">
		<div class="registerHeader">
			<div class="opacityBox">
				<img class="userImg" :src="childitems.child_pic" /> 
			</div>
			<span class="userName">{{childitems.child_name}}</span> 
			<img id="rulesigna" class="rulesign" @tap="rule()" src="../../../images/ruleresign.png" />
			<ul class="register">
                <li>
                    <span>正常打卡</span>
                    <p>{{items.signnumber}}天</p>
                </li>
                <li>
                    <span>迟到早退</span>
                    <p>0次</p>
                </li>
                <li>
                    <span>缺勤</span>
                    <p>{{items.lack}}天</p>
                </li>
                
            </ul>
		</div>
		<div class="line"></div>
		<div class="registerList">
			<ul>
				<li v-for="item in childitems.sign"> 
					<span class="time">{{item.day}}</span>
					<span class="week">{{item.w}}</span>
					<div class="registerinfo">
						<div class="colorstatus red"></div>
						<div class="textstatus green" v-if="item.ontime">正常</div>
						<div class="textstatus red" v-if="!item.ontime">缺勤</div>
						<div class="concretetime">
							{{item.ontime}}
						</div>
					</div>
					<div class="registerinfo">
						<div class="colorstatus red"></div>
						<div class="textstatus green" v-if="item.offtime">正常</div>
						<div class="textstatus red" v-if="!item.offtime">缺勤</div>
						<div class="concretetime">
							{{item.offtime}}
						</div>
					</div>
				</li>
				
			</ul>
		</div>
	</div>
	</div>
	</div>
	<script src="../../../js/jquery-1.8.3.min.js"></script>
	<script src="../../../js/mui.min.js"></script>
	<script src="../../../js/app.js"></script>
	<script src="../../../js/vue.min.js"></script>
	<script src="../../../js/token.js"></script>
	<script>
		mui.init({
					gestureConfig: {
						doubletap: true,
						longtap: true, //默认为false 
						click: true
					},
					pullRefresh: {
						container: '#pullrefresh',
						down: {
							callback: function() {
								pulldownRefresh()
							}
						},
						/*up: {
							contentrefresh: '正在加载...',
							callback: function() {
								pullupRefresh()
							}
						}*/
					}
				});
		mui.plusReady(function() {
			
            var state = app.getState();
 
            uid = state.userid;
            memberToken = state.memberToken;
			childid = state.childid 
            mui.post(Apiurl+'index/sign', {
                uid: uid, 
                memberToken: memberToken,
                child_id:childid
            }, function(data) {
                //alert(JSON.stringify(data));
                register.childitems=data.list
                register.items = data;
                //console.log(JSON.stringify(data.list.sign))
            }, 'json');
           
        });
        
        
        //切换孩子
		window.addEventListener('changeChild', function(event) {
			var childid = event.detail.changeChild;
			mui.post(Apiurl+'index/sign', {
                uid: uid,
                memberToken: memberToken,
                child_id:childid
            }, function(data) {
                //alert(JSON.stringify(data));
                register.childitems=data.list
                register.items = data;
                //console.log(JSON.stringify(data.list.sign))
            }, 'json');
		});
		function pulldownRefresh(){
			mui.post(Apiurl+'index/sign', {
                uid: uid,
                memberToken: memberToken,
                child_id:childid
            }, function(data) {
                //alert(JSON.stringify(data));
                register.childitems=data.list
                register.items = data;
                //console.log(JSON.stringify(data.list.sign))
                mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
            }, 'json');
		}
		var register = new Vue({
            el: '#register',
            data: { 
                items: [],
                childitems:[],
                week:''
            },
            methods: {
				rule: function(){
				mui.openWindowWithTitle({
                url: 'rule.html',
                id: 'rules',
                preload: true,
                show: {
                    aniShow: 'pop-in',
                    autoShow: true
                },
                styles:{
		            "render": "always",
		            "popGesture": "hide",
		            "bounce": "vertical",
		            "bounceBackground": "#efeff4",
		            "titleNView": { //详情页原生导航配置
		                backgroundColor: '#fff', //导航栏背景色
		                titleText: '规则说明', //导航栏标题
		                titleColor: '#000', //文字颜色
		                autoBackButton: true, //自动绘制返回箭头
		                splitLine: { //底部分割线
		                    color: '#dfdfdf'
		                }
		            }
		        },
                waiting: {
                    autoShow: true
                }
            });
				}

            },

        });
        /*var nowDate= new Date();
        var nowyear=nowDate.getFullYear();
        var nowMonth=nowDate.getMonth()+1;
        var nowDay=nowDate.getDate();
        var nowweek=nowDate.getDay();
        for(var i=nowDay; i>0; i--){
        	if(i<10){
        		i='0'+i
        	}
         	var arys1 = new Array();
         	var nowformat=nowyear+'-'+nowMonth+'-'+i; 
			arys1 = nowformat.split('-');
			var ssdate = new Date(arys1[0], parseInt(arys1[1] - 1), arys1[2]);  
			var week1=String(ssdate.getDay()).replace("0","日").replace("1","一").replace("2","二").replace("3","三").replace("4","四").replace("5","五").replace("6","六")//就是你要的星期几
			var week="周"+week1;
			switch(week1){
				case '日' :
				break;
				case '六' :
				break;   
				default:
				var $li=$("<li><span class='time'>"+nowMonth+'-'+i+"</span><span class='week'>"+week+"</span></li>")
	        	for(var j=0;j<2;j++){
	        		var $registerinfo=$("<div class='registerinfo'><div class='colorstatus red'></div><div class='textstatus red'>缺勤</div><div class='concretetime'>08:43:52 上学 </div></div>");
	        		$li.append($registerinfo)
	        	}
				$('.registerList ul').append($li)  
			}
        	
        }*/
    </script>
	</body>
    
</html>
